<template>
  <a-modal title-align="start" title="设置排序" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="800">
    <a-alert size="mini" type="success" :show-icon="false">鼠标拖动调整排序，仅相同层级内拖动排序</a-alert>
    <div class="menu-sort-wrap">
      <div class="header-w flex-c-sb">
        <p style="width: 300px" class="flex-c-c">
          <span class="expand-icon-w" @click="changeExpandAll">
            <icon-plus v-if="isExpandAll" />
            <icon-minus v-else />
            <!-- <svg class="icon menu-icon" style="font-size: 20px" aria-hidden="true">
              <use :xlink:href="`#${isExpandAll ? 'icon-xianxingtubiaozhizuomoban-04' : 'icon-jiahao1'}`"></use>
            </svg> -->
          </span>
          <span>菜单名称</span>
        </p>
        <div class="flex-c-sb" style="width: 260px">
          <!-- <p class="center-font">菜单等级</p> -->
          <p class="center-font"></p>
          <p class="center-font">操作</p>
        </div>
      </div>
      <a-tree draggable blockNode @drag-start="selTreeItem" :default-expand-all="false" :data="newTreeData" @drop="onDrop" :allow-drop="allowDrop">
        <template #title="record">
          <a-space class="node-con">
            <div>{{ $extract(record, 'dataFromRestApi.name') }}</div>
          </a-space>
        </template>
      </a-tree>
    </div>
    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" :loading="loading" @click="submit">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { watch, ref, computed } from 'vue'
  import { batchCategorySort } from '@/api/product'
  import _ from 'lodash-es'
  import { Message } from '@arco-design/web-vue'
  let props = defineProps(['modelValue', 'type', 'info', 'treeData', 'shopId'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })
  let isExpandAll = ref(true)
  let loading = ref(false)
  let moveStartInfo: any = ref({})
  const changeExpandAll = () => {
    isExpandAll.value = !isExpandAll.value
  }
  let newTreeData = ref([])

  const onDrop = (dragData: any) => {
    const data = newTreeData.value
    const loop = (data: any, key: any, callback: any) => {
      data.some((item: any, index: any, arr: any) => {
        if (item.key === key) {
          callback(item, index, arr)
          return true
        }
        if (item.children) {
          return loop(item.children, key, callback)
        }
        return false
      })
    }

    loop(data, dragData.dragNode.key, (_: any, index: any, arr: any) => {
      arr.splice(index, 1)
    })

    loop(data, dragData.dropNode.key, (_: any, index: any, arr: any) => {
      arr.splice(dragData.dropPosition < 0 ? index : index + 1, 0, dragData.dragNode)
    })
  }

  const allowDrop = (options: any) => {
    // 根绝父节点的Id判断当前移动的节点是否可以释放
    if (options.dropPosition == 0 || moveStartInfo.value.dataFromRestApi.parent != options.dropNode.dataFromRestApi.parent) {
      return false
    }
    return true
  }

  const setNewTreeData = (data: any) => {
    data.forEach((item: any) => {
      item.label = item.dataFromRestApi.name
      item.key = item.dataFromRestApi.id
      if (!item.children[0]) item.children = null
      if (item.children) {
        setNewTreeData(item.children)
      }
    })
  }

  const selTreeItem = (arr: any, data: any) => {
    moveStartInfo.value = data
  }

  const submit = async () => {
    try {
      loading.value = true
      const res: any = await batchCategorySort({ shopId: props.shopId, paramList: newTreeData.value })
      if (res) {
        Message.success('排序成功。当前操作不是立即生效，请等待几分钟后刷新页面')
        emits('save')
        showvisible.value = false
      }
    } catch (error) {}
    loading.value = false
  }

  watch(
    () => props.treeData,
    (val) => {
      newTreeData.value = _.cloneDeep(val)
      setNewTreeData(newTreeData.value)
    },
    {
      deep: true,
      immediate: true,
    }
  )
</script>

<style lang="less" scoped>
  :deep(.arco-tree-node) {
    border-bottom: 1px solid #d7d7d7;
    // height: 60px;

    // position: relative;
  }

  :deep(.arco-tree-node-title:hover) {
    background-color: white !important;
  }

  :deep(.arco-tree-node-icon) {
    opacity: 1 !important;
  }

  .sort-icon {
    // font-size: 24px;
  }

  .node-con {
    // .img {
    //   position: absolute;
    //   right: 210px;
    //   top: 5px;
    //   width: 40px;
    //   height: 40px;
    //   margin-top: -10px;
    // }
  }

  .menu-sort-wrap {
    margin-top: 10px;
    height: calc(84vh - 220px);
    // overflow-y: auto;
    ::v-deep .el-tree-node__content {
      border-bottom: 1px solid #ebeef5;
      height: 32px;
    }

    .header-w {
      text-align: center;
      background-color: #eee;
      // padding: 8px 10px;
      font-weight: bold;
      border-top: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
    }
    .center-font {
      width: 60px;
      text-align: right;
    }
    .expand-icon-w {
      font-size: 12px;
      width: 16px;
      height: 16px;
      border: 1px solid #999;
      cursor: pointer;
      border-radius: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20px;
    }
  }
</style>
